<script setup>
import { ref } from "vue";
// 设置头部
import headModify from "@/components/common/headModify";
// 设置标题
import setSteps from "@/components/set/setSteps.vue";
const { keyText } = defineProps(["keyText"]);
const active = ref(0);
const direction = ref("horizontal");
const activeColor = ref("#07c160");
const inactiveColor = ref("#ebedf0");
</script>

<template>
  <div class="showBox">
    <!-- fn-clear -->
    <div class="steps-bar blankShow">
      <van-steps
        :direction="direction"
        :active="active"
        active-icon="checked"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
      >
        <van-step>
          <h3>物流状态1</h3>
        </van-step>
        <van-step>
          <h3>物流状态2</h3>
        </van-step>
        <van-step>
          <h3>快件已发货</h3>
        </van-step>
      </van-steps>
    </div>
    <!-- 设置标题 -->
    <div class="modify_box head_modify">
      <head-modify :keyText="keyText"></head-modify>
      <!-- @event="getData" :pageParam="pageParam" -->
      <set-steps></set-steps>
    </div>
  </div>
</template>

<style scoped lang="scss">
.title {
  position: relative;
  line-height: 44px;
  padding: 0 10px;
  background-color: #fff;
}
.title h6 {
  position: relative;
  color: #333;
  font-size: 17px;
}
.title .more {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 14px;
  color: #666;
  height: 100%;
  line-height: 44px;
}
/* 右侧设置 */
.modify_box {
  position: absolute;
  right: -450px;
  top: 0;
  padding: 12px 10px;
  min-height: 28px;
  background: #f8f8f8;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  width: 420px;
  margin-left: 20px;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 5;
}
.modify_box:after,
.modify_box:before {
  right: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.modify_box:before {
  border-color: transparent;
  border-right-color: #e5e5e5;
  border-width: 7px;
  margin-top: -7px;
}
.title h6.active {
  display: table;
  margin: 0 auto;
}
.title h6 span.txt {
  margin: 0 8px 0 10px;
}
.title h6 span.line {
  width: 18px;
  height: 2px;
  background-color: #000;
  margin-top: 21px;
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 40px;
  .title-left {
    color: #3e82f4;

    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-text {
      color: #3e82f4;
    }
  }
}
// .steps {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   padding: 0 10px;
// }
</style>
